<template>
  <div class="flyPlan" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name">
        <div class="content">飞行计划</div>
        <el-tooltip
          :disabled="!isShowList"
          effect="dark"
          content="返回统计页"
          placement="top"
        >
          <img
            v-if="isShowList"
            src="/img/cockpit/back.png"
            alt=""
            @click.stop="reback"
          />
        </el-tooltip>
        <el-tooltip effect="dark" content="收起" placement="top">
          <img
            src="/img/cockpit/closeArrow.png"
            alt=""
            class="closeArrow"
            @click.stop="closeRight"
          />
        </el-tooltip>
      </div>
      <el-tooltip effect="dark" content="历史记录" placement="top">
        <img
          src="/img/cockpit/history.png"
          alt=""
          @click.stop="$emit('flyPlanClick')"
        />
      </el-tooltip>
    </div>
    <div v-if="!isShowList" class="card">
      <div class="totalWork">
        <div class="totalNum totalNum1">{{ totalFlyPlanNum.total || 0 }}</div>
        <div class="icon icon1" @click.stop="showTotalWork"></div>
        <div class="titleName">计划总数量</div>
        <div class="category">
          <div class="item">
            <span class="classTitle">无人机</span>
            <span class="num num1">{{ totalFlyPlanNum.drone_type || 0 }}</span>
          </div>
          <div class="item">
            <span class="classTitle">通航</span>
            <span class="num num1">{{
              totalFlyPlanNum.general_aviation_type || 0
            }}</span>
          </div>
          <div class="item">
            <span class="classTitle">其它</span>
            <span class="num num1">{{
              totalFlyPlanNum.other_aircraft_type || 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="working">
        <div class="totalNum totalNum2">{{ executingNum.total || 0 }}</div>
        <div class="icon icon2" @click.stop="showWorking"></div>
        <div class="titleName">执行中数量</div>
        <div class="category">
          <div class="item">
            <span class="classTitle">无人机</span>
            <span class="num num2">{{ executingNum.drone_type || 0 }}</span>
          </div>
          <div class="item">
            <span class="classTitle">通航</span>
            <span class="num num2">{{
              executingNum.general_aviation_type || 0
            }}</span>
          </div>
          <div class="item">
            <span class="classTitle">其它</span>
            <span class="num num2">{{
              executingNum.other_aircraft_type || 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="willWork">
        <div class="totalNum totalNum3">{{ willExeNum.total || 0 }}</div>
        <div class="icon icon3" @click.stop="showWillWork"></div>
        <div class="titleName">待执行数量</div>
        <div class="category">
          <div class="item">
            <span class="classTitle">无人机</span>
            <span class="num num3">{{ willExeNum.drone_type || 0 }}</span>
          </div>
          <div class="item">
            <span class="classTitle">通航</span>
            <span class="num num3">{{
              willExeNum.general_aviation_type || 0
            }}</span>
          </div>
          <div class="item">
            <span class="classTitle">其它</span>
            <span class="num num3">{{
              willExeNum.other_aircraft_type || 0
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="cardList">
      <div class="noAvailable" v-if="flyPlanList.length === 0">暂无数据</div>
      <div v-else class="container">
        <div v-for="plan in flyPlanList" :key="plan.flyApplyCode" class="item">
          <div v-if="plan.executionStatus === 1" class="status">执行中</div>
          <div v-if="plan.executionStatus === 0" class="status will">
            待执行
          </div>
          <div v-if="plan.executionStatus === 2" class="status finish">
            已完成
          </div>
          <div v-if="plan.executionStatus === 3" class="status finish">
            未执行
          </div>
          <div class="plan" :class="{ isSingle: !showHead }">
            <div class="info">
              <span class="label">飞行时段：</span>
              <el-tooltip
                effect="dark"
                :content="`${plan.startTime}-${plan.endTime}`"
                placement="top"
              >
                <span class="text">{{
                  `${plan.startTime}-${plan.endTime}`
                }}</span>
              </el-tooltip>
            </div>
            <div class="info">
              <span class="label">计划编号：</span>
              <el-tooltip
                effect="dark"
                :disabled="plan.flyApplyCode.length < 20"
                :content="plan.flyApplyCode"
                placement="top"
              >
                <span class="text">{{ plan.flyApplyCode }}</span>
              </el-tooltip>
            </div>
          </div>
          <div class="plane" :class="{ isSingle: !showHead }">
            <div class="info">
              <span class="label">航空器：</span>
              <el-tooltip
                effect="dark"
                :disabled="plan.aircraftId.length < 18"
                :content="plan.aircraftId"
                placement="top"
              >
                <span class="text1">{{ plan.aircraftId }}</span>
              </el-tooltip>
            </div>
            <div class="info">
              <span class="label">飞手：</span>
              <el-tooltip
                effect="dark"
                :disabled="plan.applicant.length < 18"
                :content="plan.applicant"
                placement="top"
              >
                <span class="text1">{{ plan.applicant }}</span>
              </el-tooltip>
            </div>
          </div>
          <div
            class="detail"
            @click.stop="
              getDetail(plan.aircraftId, plan.flyApplyId, plan.flyingId)
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlyPlan",
};
</script>

<script setup>
import { computed, defineProps, defineExpose, inject } from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import useFlightTaskStore from "@/store/modules/flightTask";
import { getFlyActionListApi } from "@/api/flightTask/flyAction";

const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits([
  "closeIntiver",
  "openIntiver",
  "tabPhoneHidden",
  "closeRight",
]);

const cockpitStore = useCockpitStore();
const flyTaskStore = useFlightTaskStore();
const totalFlyPlanNum = computed(() => {
  return cockpitStore.totalFlyPlanNum || {};
});
const willExeNum = computed(() => {
  return cockpitStore.willExeNum || {};
});
const executingNum = computed(() => {
  return cockpitStore.executingNum || {};
});

const flyPlanList = ref([]);
const isShowList = ref(false);

/**
 * @获取任务列表
 * */
const getList = async (executionStatus) => {
  const { rows } = await getFlyActionListApi(
    { pageNum: 1, pageSize: 10 },
    {
      executionStatus,
    }
  );
  console.log(rows);
  flyPlanList.value = rows;
};

/**
 * @查看执行中任务
 * */
const showTotalWork = async () => {
  await getList();
  isShowList.value = true;
  emits("tabPhoneHidden", false);
  if (!props.showHead) emits("closeIntiver");
};

/**
 * @查看执行中任务
 * */
const showWorking = async () => {
  await getList(1);
  isShowList.value = true;
  emits("tabPhoneHidden", false);
  if (!props.showHead) emits("closeIntiver");
};

/**
 * @查看待执行任务
 * */
const showWillWork = async () => {
  await getList(0);
  isShowList.value = true;
  emits("tabPhoneHidden", false);
  if (!props.showHead) emits("closeIntiver");
};

/**
 * @返回统计页
 * */
const reback = () => {
  isShowList.value = false;
  flyPlanList.value = [];
  // if (!props.showHead) emits("openIntiver");
};

/**
 * @查看任务详情
 * */
const getDetail = (aircraftId, flyApplyId, flyingId) => {
  if (isShowDetail.value) changeIsShowDetail();
  routeVisibleClose();
  flyTaskStore.openTabs("fourth", aircraftId, flyApplyId, flyingId);
  changeIsShowDetail();
};

const closeRight = () => {
  emits("closeRight");
};

// -------------------------------------------    inject    -----------------------------------------------------
const changeIsShowDetail = inject("changeIsShowDetail");
const isShowDetail = inject("isShowDetail");
const routeVisibleClose = inject("routeVisibleClose");

defineExpose({ reback });
</script>

<style scoped lang="scss">
.flyPlan {
  margin-right: 15px;
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      position: relative;
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;

      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      img {
        position: absolute;
        top: -9px;
        right: 10px;
        cursor: pointer;
      }
    }

    img {
      cursor: pointer;
    }

    .closeArrow {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
  }

  .card {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .totalWork,
    .working,
    .willWork {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;
      height: 150px;
      width: 25%;

      .totalNum {
        position: absolute;
        top: 4px;
        font-size: 24px;
        font-family: Digital Numbers;
        font-weight: 400;
        color: #00f0ff;
      }

      .totalNum2 {
        color: #54f8bf;
      }
      .totalNum3 {
        color: #ffa800;
      }

      .icon {
        width: 135px;
        height: 65px;
        position: absolute;
        top: 20px;
        cursor: pointer;
      }

      .titleName {
        position: relative;
        top: 42px;
        font-size: 12px;
        font-family: PingFang SC;
        // font-weight: bold;
        color: #ffffff;
      }

      .category {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        bottom: 10px;
        width: 80%;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .classTitle {
            font-size: 12px;
            display: inline-block;
            text-align: right;
            width: 45%;
            color: #fff;
          }
          .num {
            font-size: 12px;
            width: 40%;
            text-align: left;
            font-family: Myriad Pro;
            // font-weight: 400;
            color: #00f0ff;
          }
          .num2 {
            color: #54f8bf;
          }
          .num3 {
            color: #ffa800;
          }
        }
      }
    }

    .icon1 {
      background: url("/public/img/cockpit/flyPlan3.png");
    }

    .icon2 {
      background: url("/public/img/cockpit/flyPlan1.png");
    }

    .icon3 {
      background: url("/public/img/cockpit/flyPlan2.png");
    }
  }

  .cardList {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 176px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: visible;

    .noAvailable {
      font-size: 16px;
      color: #909399;
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      position: absolute;
      top: 10%;
      left: 0;
      width: 100%;
      height: 80%;
      overflow-y: scroll; /* 显示垂直滚动条 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* Internet Explorer and Edge */

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.6);
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.2);
      }
    }

    // .container::-webkit-scrollbar {
    //   display: none; /* 隐藏滚动条 - Chrome, Safari, and Opera */
    // }

    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 18px 0 12px 24px;
      width: 100%;
      height: 64px;
    }
    .status {
      align-self: flex-start;
      padding: 0 3px;
      margin-right: 20px;
      width: 46px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      background: rgba(60, 221, 255, 0.3);
      border: 1px solid #3cddff;
      border-radius: 2px;
    }
    .status.will {
      background: rgba(255, 72, 60, 0.3);
      border: 1px solid rgb(255, 72, 60);
      border-radius: 2px;
    }
    .status.finish {
      border: 1px rgba(255, 255, 255, 1) solid;
      background-color: rgba(255, 221, 255, 0.3);
      border-radius: 2px;
    }

    .plan,
    .plane {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 209px;

      .info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }

    .plan.isSingle,
    .plane.isSingle {
      width: 245px;

      .text {
        width: 160px;
      }
      .text1 {
        width: 100px;
      }
    }

    .label {
      display: inline-block;
      width: 65px;
      text-align: right;
    }

    .text,
    .text1 {
      align-self: flex-end;
      display: inline-block;
      width: 144px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .text1 {
      width: 100px;
    }

    .detail {
      align-self: flex-end;
      width: 16px;
      height: 18px;
      margin-right: 10px;
      background: url("/img/cockpit/view.png");
      cursor: pointer;
    }
  }
}
</style>
